<f:layout name="Content" />

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
     xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

	<f:section name="Configuration">
		<flux:form wizardTab="Pncaa" id="slideshow" icon="{v:extension.path.resources(path: 'Icons/icon-slideshow.png')}">
			<flux:form.section name="slideObject">
				<flux:form.object name="slides">
					<flux:form.field.file name="image" />
					<flux:form.field.input name="Title" eval="trim"/>
					<flux:form.field.text name="quotation" rows="5" cols="32"/>
					<flux:form.field.input name="author" eval="trim"/>
					<flux:form.field.input name="linkTarget">
						<flux:form.field.wizard.link/>
					</flux:form.field.input>
				</flux:form.object>
			</flux:form.section>
		</flux:form>
	</f:section>

	<f:section name="Preview">
		<strong>Big slide show</strong>
	</f:section>

	<f:section name="Main">
		<div class="slider single-item">
			<f:for each="{slideObject}" as="slides">
				<f:for each="{slides}" as="slideElement">
					<f:if condition="{slideElement.image}">
						<div>
							<f:if condition="{slideElement.linkTarget}">
								<f:then>
									<f:if condition="{slideElement.linkTarget -> v:math.round()} > 0">
										<f:then>
											<f:link.page pageUid="{slideElement.linkTarget}" rel="" title="">
												<f:image src="{slideElement.image}" alt="" />
												<section class="container">
													<section class="slide-desc">
													<h3 class="slide-title">{slideElement.Title}</h3>
													<f:format.html><article class="slide-quotation">{slideElement.quotation}</article></f:format.html>
													<p class="author">{slideElement.author}</p>
													</section>
												</section>
											</f:link.page>
										</f:then>
										<f:else>
											<a href="{slideElement.linkTarget}" rel="" title="">
												<f:image src="{slideElement.image}" alt="" />
												<section class="container">
													<section class="slide-desc">
													<h3 class="slide-title">{slideElement.Title}</h3>
													<f:format.html><article class="slide-quotation">{slideElement.quotation}</article></f:format.html>
													<p class="author">{slideElement.author}</p>
													</section>
												</section>
											</a>
										</f:else>
									</f:if>
								</f:then>
								<f:else>
									<f:image src="{slideElement.image}" alt="" />

									<section class="container">
										<section class="slide-desc">
										<h3 class="slide-title">{slideElement.Title}</h3>
										<f:format.html><article class="slide-quotation">{slideElement.quotation}</article></f:format.html>
										<p class="author">{slideElement.author}</p>
											</section>
									</section>
								</f:else>
							</f:if>
						</div>
					</f:if>
				</f:for>
			</f:for>
		</div>
	</f:section>
</div>
